<template>
    <div 
        class="pt-menu-item"
        :class="{'pt-menu-separator': item.type === 'separator'}"
        @mouseenter="handleMouseEnter"
        @mousedown="handleClick"
    >
        <pt-popper
            v-if="item.type === 'submenu'"
            position="right-top"
            :show="showSubmenu"
            :zIndex="10000"
        >
            <pt-menu :menu="item.submenu" @pop-stack="showSubmenu = false" ref="submenu"/>
            <div slot="reference">
                <div class="pt-menu-item-container">
                    <span class="item-icon"><!--占位--></span>
                    <span class="item-label">{{T(label)}}</span>
                    <span class="item-accelerator">{{accelerator}}</span>
                    <pt-icon iconName="arrow-right" size="small" className="item-submenu-arrow"/>
                </div>
            </div>
        </pt-popper>
        <div v-else-if="item.type === 'normal'" class="pt-menu-item-container">
            <span class="item-icon"><!--占位--></span>
            <span class="item-label">{{T(label)}}</span>
            <span class="item-accelerator">{{accelerator}}</span>
            <span class="item-submenu-arrow"><!--占位--></span>
        </div>
        <hr v-else class="pt-menu-item-container" /> 
    </div>
</template>

<script>
import PtPopper from "../base/popper";
import { popMenu, pushMenu } from "./menuManager";

export default {
    name: "PtMenuItem",
    components: {
        PtPopper
    },
    props: {
        /**
         * item
         * {
         *     icon: ""
         *     type: "normal", "submenu", "separator"
         *     role: "",
         *     accelerator: '',
         *     label: '',
         *     handler: Function
         *     submenu: []
         * }
         */
        item: {
            type: Object
        }
    },

    data () {
        return {
            showSubmenu: false
        };
    },

    computed: {
        label() {
            const { item } = this;
            if (item.label) {
                return item.label;
            }
            return "";
        },
        accelerator() {
            const { item } = this;
            if (!item.accelerator) {
                return "";
            }

            return item.accelerator.split("+").map((key) => {
                key = key.trim().toLowerCase();
                return key[0].toUpperCase() + key.substr(1)
            }).join("+");
        }
    },

    methods: {
        handleMouseEnter() {
            popMenu(this.$parent);
            if (this.item.submenu && this.item.submenu.length) {
                pushMenu(this.$refs.submenu);
                this.showSubmenu = true;
            }
        },

        handleClick() {
            if (typeof this.item.handler === 'function') {
                this.item.handler();
            }
        }
    }
}
</script>

<style lang="scss">
@import "@/assets/scss/_const.scss";
.pt-menu-item {
    position: relative;
    cursor: default;

    height: $menuItemHeight;
    line-height: $menuItemHeight;
    &:hover {
        background-color: var(--highlightItemColor);
    }

    &.pt-menu-separator {
        height: 1px !important;
        line-height: 1px !important;
        margin: {
            top: 5px;
            bottom: 5px;
        }
        &:hover {
            background-color: transparent !important;
        }

        hr {
            border: none;
            height: 1px;
            background-color: var(--borderColor); 
        }
    }

    

    .pt-menu-item-container {
        display: flex;
        align-items: center;
        margin: {
            left: 5px;
            right: 5px;
        }

        .item-icon {
            display: inline-block;
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }
        .item-label {
            display: inline-block;
            flex-grow: 1;
            text-align: left;
            color: var(--primaryTextColor);
        }
        .item-accelerator {
            display: inline-block;
            flex-grow: 1;
            text-align: right;

            color: var(--secondaryTextColor);
        }
        .item-submenu-arrow {
            display: inline-block;
            width: 16px;
            height: 16px;
            flex-shrink: 0;

            color: var(--secondaryTextColor);
        }
    }
}
</style>
